<template>
	<view class="main">
		<uni-nav-bar fixed left-icon="back" title="登录密码设置" color="#333333" backgroundColor="#FFFFFF" :border="false" statusBar
			@clickLeft="goReturn"></uni-nav-bar>
		
		<view class="form-data">
			<uni-forms ref="form" :modelValue="formData" :rules="rules" label-position="top" label-width="20">
				<uni-forms-item label="旧密码" name="old_pwd">
					<uni-easyinput type="text"  v-model="formData.old_pwd" placeholder="请输入旧密码"/>
				</uni-forms-item>
				<uni-forms-item label="新密码" name="pwd">
					<uni-easyinput type="text" v-model="formData.pwd" placeholder="请输入新密码" />
				</uni-forms-item>
				<uni-forms-item label="确认新密码" name="repeat_pwd">
					<uni-easyinput type="text" v-model="formData.repeat_pwd" placeholder="请再次输入新密码" />
				</uni-forms-item>
			</uni-forms>
			<view class="submit">
				<button class="btn" type="default" @click="submit">确认</button>
			</view>
		</view>
		
		 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 // 表单数据
				 formData: {
				 	old_pwd: '',
				 	pwd: '',
					repeat_pwd:''
				 },
				 rules: {
				 	old_pwd: {
				 		rules: [
				 			{required: true,errorMessage: '请输入旧密码'}
				 		]
				 	},
				 	pwd: {
				 		rules: [
				 			{required: true,errorMessage: '请输入新密码'}
				 		]
				 	},
					repeat_pwd: {
						rules: [
							{required: true,errorMessage: '请再次输入新密码'},
							{
								validateFunction:function(rule,value,data,callback){
									if(data.pwd != value){
										callback('两次密码输入不一致')
									}
									return true						
								}
							}
						]
					}
				 }
			}
		},
		methods: {
			// 触发提交表单
			submit() {
				this.$refs.form.validate().then(res=>{
					this.$http.post('/v1/edit_login_pwd',this.formData,res => {
						if(res.code == 200){
							uni.showToast({
								 icon: 'none',
								 title: '设置成功',
							})
						}
					})
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			},
			// 返回
			goReturn() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	 .form-data{
		 /deep/.uni-easyinput__content{
			border: none;
			border-bottom: 1px solid #f2f2f2;
		 }
		 /deep/.uni-forms-item__label{
			 font-size: 32upx;
			 color: #333333;
			 font-weight: 600;
		 }
		 .submit{
			 width: 100%;
			 margin-top: 150upx;
			 .btn{
				 width: 400upx;
				 height: 80upx;
				 line-height: 80upx;
				 border-radius: 40upx;
			 }
		 }
	 }
</style>
